<template>
  <el-dropdown split-button
               v-bind="$attrs"
               v-on="$listeners"
               class="z-split-button"
               ref="z-split-button">
    <slot>{{title}}</slot>
    <el-dropdown-menu slot="dropdown"
                      class="z-split-button__menu">
      <el-dropdown-item v-for="item in options"
                        :command="item.value"
                        :icon="item.icon"
                        :divided="item.divided"
                        :disabled="item.disabled || $attrs[`disabled-${item.value}`]"
                        :key="item.value">{{item.label}}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { set } from 'lodash'
export default {
  name: 'ZSPlitButton',
  props: {
    options: {
      type: Array,
      default: () => ([])
    },
    title: {
      type: String,
      require: true
    },
    disabled: Boolean
  },
  mounted () {
    if (this.$refs['z-split-button'] && this.disabled) {
      this.$refs['z-split-button'].$children[0].$children[0].$el.classList.add('is-disabled')
    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
.z-split-button {
  &__menu {
    margin-top: 6px !important;
    .el-dropdown-menu__item {
      line-height: 36px !important;
      height: 36px !important;
    }
    .popper__arrow {
      display: none;
    }
  }
}
</style>
